import React, { Component } from 'react';
import './Home.scss'
import HomeCarousel from './HomeCarousel'
import NewItemList from './NewItemList'
// 引入全部频道标签栏
import LovingGoods from '../LovingGoods/LovingGoods'
// 引入模块列表
import ModuleList from './ModuleList'
import axios from 'axios';
import {labeIndex} from '../../store/actionCreator'
import { connect } from "react-redux";
class Home extends Component {
  constructor(props){
    super(props);
    this.props.updateLabeIndex()
  }
  state = {
    data: undefined
  }
  componentDidMount() {
    axios.get('/xhr/index.json?__timestamp=1598260827497&').then((res) => {
      this.setState({
        data: res.data.data
      })
    })
  }

  render() {

    if (this.state.data) {
      const { data } = this.state;
      return (
        <div className='home'>
          {/* 标签栏开始 */}
          {/* <LabelBar></LabelBar> */}
          {/* 标签栏结束 */}
          {/* 轮播图开始  */}
          <HomeCarousel data={data}></HomeCarousel>
          {/* 轮播图结束  */}
          {/* 模块列表开始 */}
          <ModuleList data={data}></ModuleList>
          {/* 模块列表结束 */}
          {/* 新品首发列表开始 */}
          <NewItemList data={data}></NewItemList>
          {/* 新品首发列表结束 */}
          {/* 猜你喜欢开始 */}
          <LovingGoods></LovingGoods>
          {/* 猜你喜欢结束 */}

        </div>
      );
    } else {
      return null
    }
  }
}
const mapStateToProps = (state) => {
  return {
    labeIndex:state.getIn(['home','labeIndex']),
  };
};
const MapDispatchToProps =  (dispatch) => {
  return{
    updateLabeIndex(){
      dispatch(labeIndex(0))
    }
  }
}
export default connect(mapStateToProps, MapDispatchToProps)(Home);
